<template>
  <div ref="nodeRef" :style="nodeContainerStyle" @click="clickNode" @mouseup="changeNodeSite"
    :class="[nodeContainerClass]" @mouseenter="showAnchor" @mouseleave="hideAnchor"
    @contextmenu.prevent="onContextmenu">
    <!-- 最左侧的那条竖线 -->
    <div class="ef-node-left"></div>
    <!-- 节点类型的图标 -->
    <div class="ef-node-left-ico">
      <i v-if="!nodeClassType.includes(props.node.nodeType)" :class="nodeIcoClass"></i>
    </div>
    <!-- 节点名称 -->
    <div class="ef-node-text">{{ node.nodeName }}-{{ node.nodeKey }}</div>
    <!--连线用--//触发连线的区域-->
    <div v-show="mouseEnter" class="flow-node-drag node-btn btn-top"></div>
    <div v-show="mouseEnter" class="flow-node-drag node-btn btn-right"></div>
    <div v-show="mouseEnter" class="flow-node-drag node-btn btn-bottom"></div>
    <div v-show="mouseEnter" class="flow-node-drag node-btn btn-left"></div>
    <!-- 节点状态图标 -->
    <div class="ef-node-right-ico" v-if="props.node.nodeType != '16' && props.node.nodeType != '17'">
      <a-button @click="aaa" style="width: 20px; height: 8px; margin-right: 15px" type="text">
        <template #icon><dash-outlined /></template>
      </a-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineEmits, defineProps } from "vue";
import NodeMenu from "@/components/flowDesign/flowNode/nodeMenu.vue";
import { DashOutlined } from "@ant-design/icons-vue";
import { icoList } from "@/components/flowDesign/dicts/show.js";
import { nodeTypeNames } from "@/components/flowDesign/dicts/show.js";

const nodeRef = ref();
const props = defineProps({
  node: { type: Object },
  activeElement: { type: Object },
});
const aaa = () => {
  console.log(111111);
};
const emit = defineEmits(["clickNode", "changeNodeSite"]);
/**
 * 节点复制删除
 */
const mouseEnter = ref(false);
const showAnchor = () => {
  mouseEnter.value = true;
};
const hideAnchor = () => {
  mouseEnter.value = false;
};
const onContextmenu = () => {
  clickNode();
};
const nodeClassType = [16, 17];
const nodeContainerClass = computed(() => {
  var activeClass;
  return {
    "unselectable": props.node.nodeType == nodeTypeNames.finishNode ? true : false,
    "ef-node-container":
      props.node.nodeType != nodeTypeNames.initiatingNode ||
      props.node.nodeType != nodeTypeNames.finishNode,
    "ef-node-active":
      props.activeElement?.nodeKey === props.node?.nodeKey &&
      (props.node.nodeType != nodeTypeNames.parallelBranchNode
        ? true
        : false || props.node.nodeType != nodeTypeNames.ifBranchNode
          ? true
          : false), //点击当前节点
    "ef-end-container":
      props.node.nodeType == nodeTypeNames.initiatingNode ||
      props.node.nodeType == nodeTypeNames.finishNode,
    "ef-groud-container":
      props.node.nodeType == nodeTypeNames.parallelBranchNode ||
      props.node.nodeType == nodeTypeNames.ifBranchNode,
  };
});
//     节点容器样式
const nodeContainerStyle = computed(() => {
  return {
    top: props.node.top,
    left: props.node.left,
  };
});

const nodeIcoClass = computed(() => {
  var nodeIcoClass = {};
  let icon = icoList.find((item) => {
    return props.node.nodeType == item.nodeTypeId;
  });
  nodeIcoClass[props.node.ico ? props.node.ico : ""] = true;
  return nodeIcoClass;
});
// 点击节点
const clickNode = () => {
  emit("clickNode", props.node);
};
// 鼠标移动后抬起
const changeNodeSite = () => {
  // 避免抖动
  if (
    props.node.left == nodeRef.value.style.left &&
    props.node.top == nodeRef.value.style.top
  ) {
    return;
  }
  emit("changeNodeSite", {
    nodeId: props.node?.nodeKey,
    left: nodeRef.value.style.left,
    top: nodeRef.value.style.top,
  });
};
</script>
<style scoped lang="less">
@nodeSize: 10px;
@floaNodetSize: 15px;

.node-btn {
  display: flex;
  position: absolute;
  width: @nodeSize;
  height: @nodeSize;
  align-items: center;
  justify-content: center;
  z-index: 1;
  border-radius: 50%;
  /* 将div设为圆形 */
  border: 1px solid gray;
  background-color: #fafafa;
  /* 背景颜色 */
}

.node-btn:hover {
  border: 1px solid #1879ff;
}

.btn-top {
  top: calc((@nodeSize / 2) * -1);
  left: 50%;
  margin-left: calc((@nodeSize / 2) * -1);
}

.btn-top:hover {
  /* 设置拖拽的样式 */
  cursor: crosshair;
}

.btn-right {
  top: 50%;
  right: calc((@nodeSize / 2) * -1);
  margin-top: calc((@nodeSize / 2) * -1);
}

.btn-right:hover {
  /* 设置拖拽的样式 */
  cursor: crosshair;
}

.btn-bottom {
  bottom: calc((@nodeSize / 2) * -1);
  left: 50%;
  margin-left: calc((@nodeSize / 2) * -1);
}

.btn-bottom:hover {
  /* 设置拖拽的样式 */
  cursor: crosshair;
}

.btn-left {
  top: 50%;
  left: calc((@nodeSize / 2) * -1);
  margin-top: calc((@nodeSize / 2) * -1);
}

.btn-left:hover {
  /* 设置拖拽的样式 */
  cursor: crosshair;
}

.a1 {
  background: #21a366;
}
</style>
